<template>
  <div>
    <!-- <el-row :gutter="100">
      <el-col :span="6" class="adr"
        ><div class="grid-content bg-purple">平台收银台</div></el-col
      >
      <el-col :span="6"><div class="grid-content bg-purple">登录</div></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">我的订单</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
              }}</span>
            </el-option>
          </el-select>
        </div></el-col
      >
    </el-row> -->
    <div class="top3">
      <label for="" style="float: left; font-size: 26px"
        >订单提交成功请尽快付款，单号{{ num }}</label
      >
      <label for="" style="float: right; font-size: 26px"
        >应付金额：{{ num }}</label
      >
    </div>
    <!-- 顶栏结束 -->
    <div class="top2">
      <!-- 中间主体 -->
      <label
        for=""
        style="
          width: 30%;
          float: left;
          font-size: 50px;
          border: lightcoral solid 2px;
          margin-left: 1%;
        "
        >支付方式</label
      >
    </div>
    <br />
    <div>
      <el-card
        style="
          margin-top: 100px;
          border: black solid 2px;
          width: 90%;
          margin-left: 3%;
        "
      >
        <el-radio-group v-model="radio" v-for="n in cities" v-bind:key="n">
          <li class="che">
            <el-radio :label="n.id" class="ttre"
              >用这个
              <!-- <el-checkbox class="ttre" ref="cct"   @change="check" name="rrr"></el-checkbox> -->
              <!-- 购物车 -->

              <li class="uo">
                <label
                  for=""
                  :class="n.ioc"
                  style="
                    background-color: rgb(152, 149, 163);
                    border: black 2px solid;
                    font-size: 35px;
                    margin-left: -35%;
                    width: 15%;
                    height: 95%;
                  "
                ></label>
                <label for="" :label="3" style="margin-left: 20%">{{
                  n.label
                }}</label>
              </li>

              <label
                for=""
                style="
                  font-size: 30px;
                  width: 600px;
                  height: 50px;
                  float: left;
                  text-align: center;
                  margin-top: -50px;
                  border: black solid 2px;
                  margin-left: 500px;
                "
                >支付：{{ n.value }}元</label
              >
            </el-radio>
          </li>
        </el-radio-group>
      </el-card>

      <el-button
        @click="zhifu"
        style="
          width: 220px;
          higet: 60px;
          border: black solid 2px;
          float: right;
          margin-right: 6%;
        "
        >支付</el-button
      >
    </div>

    <div style="width: 100%; margin-top: 6%">
      <el-card style="width: 49%; float: left"> icp备案号 </el-card>
      <el-card style="width: 49%; float: left"> 公安备案号 </el-card>
    </div>
  </div>
</template>

<script>


export default {
  data () {
    return {

      checkAll: false,
      checkDate: [],
      flag: false,
      item: [],
      num: 1,
      num1: 0,
      numm0: false,
      numm1: 0,
      numm2: false,
      radio: 3,
      cities: [
        {
          id: 3,
          label: "微 信 支付",
          value: 1220,
          ioc: "el-icon-chat-dot-round"
        },
        {
          id: 6,
          label: "支付宝支付",
          value: 1220,
          ioc: "el-icon-user-solid"
        },
        {
          id: 9,
          label: " Q Q 支 付",
          value: 1220,
          ioc: "el-icon-s-finance"
        },
      ], //数据源
      checkedCities: [], //绑定默认选中
      isIndeterminate: true, //设置 indeterminate 状态，只负责样式控制
    };
  },

  methods: {
    handleChange (value) {
      console.log(value);
    },
    //选中几个
    mu1 (parent) {
      var i = parent
      console.log(i);
    },
    check () {


    },
    checkHAll () {
      this.$ref.cct.clearSelection();
    }


  },
  computed: {
  }
};


</script>


<style scoped>
.che {
  border: black 2px solid;

  margin-top: 7px;
  width: 1200px;
  height: 70px;
  float: left;
  /* 购物车边款 */
}
li {
  list-style: none;
}
.top3 {
  margin-left: 1%;
  width: 98%;
  height: 60px;
  background-color: chocolate;
}
.top2 {
  margin-left: 1%;
  background-color: chocolate;
}
.uo {
  /* 商品图片和商品名card */
  background-color: rgb(70, 116, 237);
  color: #000;
  font-size: 22px;
  text-align: center;
  margin-top: -27px;
  width: 300px;
  height: 50px;
  float: left;
  margin-left: 130px;
}

.ttre {
  /* 购物车选择 */
  margin-top: 20px;
  margin-left: 20px;
  height: 40px;
  width: 40px;
  float: left;
}
</style>